<template>
  <div :class="['home-container', { 'dark-mode': !isDayMode }]">
    <header class="header">
      <h1 class="title">心晴港湾——基于AI情感计算的学生心理健康支持系统管理端</h1>
      <div class="header-right">
        <el-switch 
          v-model="isDayMode" 
          active-color="#98F5F9" 
          inactive-color="#424242" 
          :class="{ 'day-mode-switch': isDayMode, 'night-mode-switch': !isDayMode }">
        </el-switch>
        <span v-if="!isDayMode" class="mode-text">夜间模式</span>
        <span v-if="isDayMode" class="mode-text">日间模式</span>
        <span class="mode-text">{{ currentDate }}</span> <!-- 使用计算属性显示当前日期和时间 -->
        <el-button type="danger" @click="handleLogout">退出</el-button>
      </div>
    </header>
    <div class="main-content">
      <el-aside width="250px" class="aside">
        <el-menu 
          :default-openeds="['1']" 
          :text-color="!isDayMode ? '#fff' : '#515151'" 
          :background-color="!isDayMode ? '#424242' : '#fff'" 
          :style="{ borderRight: !isDayMode ? '1px solid #424242' : '1px solid #fff' }">
          <el-menu-item index="1" @click="$router.push('/home/user')">
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="2" @click="$router.push('/home/knowledge')">
            <span>知识库管理</span>
          </el-menu-item>
		  <el-menu-item index="3" @click="$router.push('/home/data')">
		    <span>数据库管理</span>
		  </el-menu-item>
        </el-menu>
      </el-aside>
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Message, Button, Aside, Menu, MenuItem, Submenu, Switch } from 'element-ui';

export default {
  components: {
    ElButton: Button,
    ElAside: Aside,
    ElMenu: Menu,
    ElMenuItem: MenuItem,
    ElSubMenu: Submenu,
    ElSwitch: Switch
  },
  data() {
    return {
      isDayMode: true,
      timer: null, // 定时器
      currentDate: this.formatDate(new Date()), // 初始化当前日期
    };
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0'); // 小时
      const minutes = String(date.getMinutes()).padStart(2, '0'); // 分钟
      const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化为 yyyy-mm-dd hh:mm:ss
    },
    updateTime() {
      this.currentDate = this.formatDate(new Date()); // 更新当前时间
    },
    handleLogout() {
      this.$router.push('/login');
      Message.success('退出成功');
    },
  },
  mounted() {
    this.timer = setInterval(this.updateTime, 1000); // 每秒更新一次时间
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
  }
};
</script>

<style scoped>
.logo {
  height: 50px;
  margin: 0;
}
.mode-text {
  margin-left: 4px;
  margin-right: 25px;
}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #79ECF1;
  color: white;
}

.title {
  font-family: 'STKaiti', 'KaiTi', serif;
  font-size: 24px;
}

.header-right {
  display: flex;
  align-items: center;
}

.main-content {
  display: flex;
  flex: 1;
}

.aside {
  background-color: inherit;
}

.content {
  flex: 1;
  padding: 20px;
  background-color: #F5F5F5;
}

.dark-mode {
  background-color: #333;
  color: #fff;
}

.dark-mode .header {
  background-color: #555;
}

.dark-mode .aside {
  background-color: #444;
}

.dark-mode .content {
  background-color: #424245;
}

.el-menu {
  border-right: none;
}
.el-switch {
  --el-color-primary: #FFA54F;
}
.el-button {
  margin-left: 10px;
}
</style>
